<template>
  <el-dialog :title="modalName" :visible.sync="isVisible">
    <el-form ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" autocomplete="off" placeholder="2-10个字符" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="managerId">
        <el-select
          v-model="form.managerId"
          placeholder="请选择负责任"
          style="width: 100%"
          @blur="validateManagerId"
        >
          <el-option
            v-for="item in mangerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" placeholder="1-100个字符" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submit">确 定</el-button>
      <el-button size="small" @click="isVisible = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { updataDepartment, addDepartment, getMangerList } from '@/api/department'
export default {
  name: 'Modal',
  components: {},
  props: {
    data: {
      type: Array,
      required: true
    }
  },
  data() {
    const repeatName = (rule, value, callback) => {
      let arr = []
      Object.assign(arr, this.data)
      if (this.modalName === '编辑') {
        arr = arr.filter(item => item.id !== this.form.id && item.name === value)
      } else {
        arr = arr.filter(item => item.name === value)
      }
      console.log(arr)

      if (arr.length) {
        return callback(new Error('部门名称不能重复'))
      }
      callback()
    }
    const repeatCode = (rule, value, callback) => {
      let arr = []
      Object.assign(arr, this.data)
      if (this.modalName === '编辑') {
        arr = arr.filter(item => item.id !== this.form.id && item.code === value)
      } else {
        arr = arr.filter(item => item.code === value)
      }

      if (arr.length) {
        return callback(new Error('部门编码不能重复'))
      } else {
        return callback()
      }
    }
    return {
      isVisible: false,
      // form里的属性名不能随便写，得去看api文档
      form: {
        id: '',
        name: '',
        code: '',
        managerId: '',
        introduce: '',
        pid: '',
        createTime: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { pattern: /^\S{2,10}$/, message: '2-10个字符', trigger: 'blur' },
          { validator: repeatName, trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { pattern: /^\S{2,10}$/, message: '2-10个字符', trigger: 'blur' },
          { validator: repeatCode, trigger: 'blur' }
        ],
        managerId: [{ required: true, message: '请输入部门编码', trigger: 'blur' }],
        // managerId: [{ validator: this.validateManagerId, trigger: 'click' }],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { pattern: /^\S{1,100}$/, message: '1-100个字符', trigger: 'blur' }
        ]
      },
      mangerList: {},
      modalName: ''

    }
  },
  computed: {},
  watch: {},
  created() {
    this.getMangerList()
  },
  mounted() {},
  methods: {
    add(pid) {
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        console.log(pid)
        this.form.name = ''
        this.form.code = ''
        this.form.managerId = ''
        this.form.introduce = ''
      })
    },
    // 父组件触发edit
    edit(data) {
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
        // console.log(data)
        Object.assign(this.form, data)
      })
    },
    async getMangerList() {
      const { data } = await getMangerList()
      // console.log(res)
      this.mangerList = data
      // console.log(this.mangerList)
    },
    submit() {
      this.$refs.form.validate(async(valid) => {
        if (!valid) return
        if (this.modalName === '添加') {
          // 添加数据
          await addDepartment(this.form)
          // 关闭窗口
          this.isVisible = false
          // 告诉父组件添加成功
          this.$emit('success')
          // 提示添加成功
          this.$message.success('添加成功！')
        } else {
          // 修改数据
          await updataDepartment(this.form.id, this.form)
          // 关闭窗口
          this.isVisible = false
          // 告诉父组件添加成功
          this.$emit('success')
          // 提示添加成功
          this.$message.success('更新成功！')
        }
      })
    },
    validateManagerId() {
      // console.log(1)
      setTimeout(() => {
        this.$refs.form.validateField('managerId')
      }, 100)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-input__inner {
  height: 28px;
}
.el-form {
  padding: 0 120px 0 20px;
}
</style>
